console.log(e);

setError(e.toString());

})

}

Similar to login, signups call TodoDataService’s signup method which calls the Django API login endpoint:

Analyze Code

signup(data){

return axios.post("http://localhost:8000/api/signup/", data);

}

The signup API returns an authorization token which we set to the token state variable, setToken(response.data.token) .

Like login, we store the token and username in local storage.

Next in /components/signup.js, fill it with the following code:

Replace Entire Code

import React, {useState} from 'react';

import Form from 'react-bootstrap/Form';

import Container from 'react-bootstrap/Container';

import Button from 'react-bootstrap/Button';

const Signup = props => {

const [username, setUsername] = useState("");

const [password, setPassword] = useState("");

const onChangeUsername = e => {

const username = e.target.value;

setUsername(username);

}

const onChangePassword = e => {

const password = e.target.value;

setPassword(password);

}

const signup = () => {

props.signup({username: username, password: password});

props.history.push('/');

}

return(

<Container>

<Form>

<Form.Group className="mb-3">

<Form.Label>Username</Form.Label>

<Form.Control

type="text"

placeholder="Enter username"

value={username}

onChange={onChangeUsername}

/>

</Form.Group>

<Form.Group className="mb-3">

<Form.Label>Password</Form.Label>

<Form.Control

type="password"

placeholder="Enter password"

value={password}

onChange={onChangePassword}

/>

</Form.Group>

<Button variant="primary" onClick={signup}>

Sign Up

</Button>

</Form>

</Container>

)

}

export default Signup;

* Contact [email protected] for the source code if you prefer to copy and paste

The signup form looks and work similar to the login form, so we won’t explain it.